<!-- 仓库设置 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>仓库设置</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
    <link rel="stylesheet" href="../css/reset.css?3123">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <link rel="stylesheet" href="../css/viewer.min.css">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none;" v-show="showApp">
        <div class="content_box">
            <div ref="tops">
                <div class="title_box">
                    <div class="title_name">仓库明细:</div>
                    <div class="title_but">
                        <el-button class="border_but" @click="addCkmx" type="primary">新增</el-button>
                    </div>
                </div>
            </div>
            <div class="detail_box" ref="detailbox">
                <div class="table_box border_table_box">
                    <el-table :data="ckmxTableData" height="100%" border @row-click="rowclick" ref="multipleTable"
                              @selection-change="selectionchange" :select-on-indeterminate="isSingle == 1 ? false : true"
                              @select="select" @select-all="selectall" style="width: 100%">
                        <el-table-column align="center" type="selection" width="50" show-overflow-tooltip label="序号">
                        </el-table-column>
                        <el-table-column align="center" prop="imgId" width="50" show-overflow-tooltip label="序号">
                        </el-table-column>
                        <el-table-column prop="name" align="center" min-width="100" show-overflow-tooltip label="仓库名称">
                        </el-table-column>

                        <el-table-column prop="type" align="center" min-width="80" show-overflow-tooltip label="仓库类型">
                            <template slot-scope="scope">
                                <span v-if="scope.row.type == 1">仓库</span>
                                <span v-if="scope.row.type == 2">堆场</span>
                                <span v-if="scope.row.type == 3">临时堆放点</span>
                        
                            </template>
                        </el-table-column>

                        <el-table-column prop="time" align="center" show-overflow-tooltip label="位置选点" width="100">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.isspot == 0 && scope.row.isAdd"
                                           @click="chioseSpot(scope.row)" class="border_but"
                                           style="height: 24px;margin: 0 auto;" type="primary">选择</el-button>
                                <el-button v-if="scope.row.isspot == 1 && scope.row.isAdd"
                                           @click="reselectSpot(scope.row)" class="border_but"
                                           style="height: 24px;margin: 0 auto;" type="primary">重选</el-button>
                            </template>
                        </el-table-column>

                        <el-table-column prop="name" align="center" show-overflow-tooltip label="货架" width="124">
                            <template slot-scope="scope">
                                <div class="table_input" v-if="scope.row.type == 1">
                                    <el-select @change="(val) => hjSelectChange(val, scope.$index)"
                                               @visible-change="(val) => visiblechange(val, scope.row.id)"
                                               v-model="scope.row.x_goodsShelvesNumber" clearable placeholder="请选择">
                                        <el-option v-for="item in hjSelectData" :key="item.number" :label="item.number"
                                                   :value="item.number">
                                        </el-option>
                                    </el-select>
                                </div>
                                <span v-if="scope.row.type != 1">无货架</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="creatername" align="center" show-overflow-tooltip label="创建人"
                                         min-width="70">
                        </el-table-column>

                        <el-table-column prop="addtime" align="center" show-overflow-tooltip label="创建时间" width="160">
                        </el-table-column>

                        <el-table-column prop="personinchargename" align="center" show-overflow-tooltip label="负责人"
                                         min-width="70">
                        </el-table-column>

                        <el-table-column prop="describe" align="center" show-overflow-tooltip label="备注"
                                         min-width="150">
                        </el-table-column>
                        <el-table-column prop="address" align="center" show-overflow-tooltip label="操作" width="106">
                            <template slot-scope="scope">
                                <el-button @click="removeCkmx(scope.$index)" v-if="scope.row.isAdd" type="text">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="img_box">
                    <div class="file_but">
                        <div></div>
                        <div class="icon_type_box">
                            <img style="width: 24px;" src="../img/icon32.png" alt="">
                            <div>仓库</div>
                            <img style="width: 24px;" src="../img/icon22.png" alt="">
                            <div>堆场</div>
                            <img style="width: 19px;" src="../img/icon12.png" alt="">
                            <div>临时堆放点</div>
                        </div>
                    </div>
                    <div class="file_box">
                        <div class="img_scroll_box" v-if="isupload">
                            <img v-if="!fileData.fileurl"
                                 style="position: absolute; left: 50%;transform: translateX(-50%);width: 30px;"
                                 src="../img/loading.gif" alt="">
                            <div v-if="!fileData.fileurl"
                                 style="position: absolute; top: 76px;left: 50%;transform: translateX(-50%);">
                                正在加载图纸
                            </div>
                            <div class="img_cont" style="width: 100px;">
                                <div class="img_contan" style="width: 100%;position: relative;" @click="imgSpotChiose">
                                    <img id="drawing" :src="fileData.fileurl" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="but_box">
            <el-button class="cancelClass" @click="cancels">取消</el-button>
            <el-button type="primary" @click="confirms" style="margin-left: 120px">提交</el-button>
        </div>
        <!-- 新增仓库明细 -->
        <el-dialog :title="ckmxPopupTitle" :visible.sync="dialogVisible" custom-class="public_popup" width="60%">
            <div class="public_popup_box">
                <div class="public_popup_cell_box">
                    <div class="popup_cell_item">
                        <div class="popup_cell_name must_input">仓库名称:</div>
                        <div class="popup_cell_cont">
                            <el-input placeholder="请输入内容" v-model="addCkObj.name" class="public_input" clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="popup_cell_item">
                        <div class="popup_cell_name must_input">仓库类型:</div>
                        <div class="popup_cell_cont">
                            <el-radio v-model="addCkObj.type" label="1">仓库</el-radio>
                            <el-radio v-model="addCkObj.type" label="2">堆场</el-radio>
                            <el-radio v-model="addCkObj.type" label="3">临时堆放点</el-radio>
                        </div>
                    
                    </div>
                    <div class="popup_cell_item">
                        <div class="popup_cell_name must_input">负责人:</div>
                        <div class="popup_cell_cont">
                            <el-select @change="fzrChange" v-model="addCkObj.personinchargecode" class="public_input"
                                       clearable placeholder="请选择">
                                <el-option v-for="item in fzrList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="popup_cell_item">
                        <div class="popup_cell_name">备注:</div>
                        <div class="popup_cell_cont">
                            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="addCkObj.describe">
                            </el-input>
                        </div>
                    </div>
                </div>
                <div class="but_box">
                    <el-button @click="dialogVisible = false" class="cancelClass">取消</el-button>
                    <el-button v-if="popupType == 'add'" @click="saveCkmx" type="primary" style="margin-left: 120px">
                        提交
                    </el-button>
                    <el-button v-if="popupType == 'edit'" @click="updateCkmx" type="primary" style="margin-left: 120px">
                        提交
                    </el-button>
                </div>
            </div>
        </el-dialog>
    </div>
    <script src="../js/public.js?12345"></script>
    <script>
        var layer = layui.layer
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    ckmxPopupTitle: '新增仓库明细',
                    popupType: 'add',
                    // 新增仓库信息对象
                    addCkObj: {},
                    fzrList: [],
                    editIndex: '',
                    dialogVisible: false,
                    showApp: false,
                    isupload: false,
                    isClick: false,
                    spotId: '',
                    spottype: '',
                    projectId: '',
                    // 仓库明细表格数据
                    ckmxTableData: [],
                    fileData: {
                        filename: '',
                        fileurl: '',
                    },
                    selected: [],
                    isSingle: '',
                    hjSelectData: [],
                    listNum: 0,
                    selectArr: [],
                    materiaobj: {}
                };
            },
            methods: {
                hjSelectChange(val, index) {
                    var that = this
                    for (var i = 0; i < that.hjSelectData.length; i++) {
                        if (val == that.hjSelectData[i].number) {
                            that.ckmxTableData[index].x_goodsShelvesId = that.hjSelectData[i].id
                        }
                    }
                },
                visiblechange(val, id) {
                    var that = this
                    if (val) {
                        that.hjSelectData = []
                        xLoading(true)
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/GetGoodsShelvesByStorage',
                            data: {
                                storageId: id
                            },
                            dataType: 'json',
                            success: function (res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                // var newarr = []
                                // var newarr2 = []
                                // if (that.selectArr.length > 0) {
                                //     for (var i = 0; i < res.data.length; i++) {
                                //         for (var j = 0; j < that.selectArr.length; j++) {
                                //             if (id == that.selectArr[j].id && res.data[i].number == that.selectArr[j].number) {
                                //                 res.data[i].flag = true
                                //             }
                                //         }
                                //         if (!res.data[i].flag) {
                                //             newarr.push(res.data[i])
                                //         }
                                //     }
                                // }
                                // for (var j = 0; j < newarr.length; j++) {
                                //     if (newarr[j].mid && newarr[j].mid != 0) {
                                //         if (that.materiaobj.materialId.length > 0 && that.materiaobj.materialId != 0) {
                                //             if (!(that.materiaobj.materialId != newarr[j].mid || that.materiaobj.specsId != newarr[j].msid)) {
                                //                 newarr2.push(newarr[j])
                                //             }
                                //         }
                                //     } else {
                                //         newarr2.push(newarr[j])
                                //     }
                                // }
                                that.hjSelectData = res.data
                            }
                        });
                    }
                },
                selectall() {
                    if (this.isSingle == 1) {
                        this.$refs.multipleTable.clearSelection();
                    }
                },
                select(selection, row) {
                    if (this.isSingle == 1) {
                        if (selection.length > 1) {
                            var del_row = selection.shift()
                            for (var i = 0; i < this.ckmxTableData.length; i++) {
                                if (del_row.imgId == this.ckmxTableData[i].imgId) {
                                    this.$refs.multipleTable.toggleRowSelection(this.ckmxTableData[i], false);
                                }
                            }
                        }
                    }
                },
                // 点击某一行选择
                rowclick(row, column, event) {
                    if (this.isSingle == 1) {
                        this.$refs.multipleTable.clearSelection();
                    }
                    if (row) {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    }
                },
                selectionchange(val) {
                    this.selected = val;
                },
                hjEdit(row) {
                    var that = this
                    parent.layer.open({
                        type: 2,
                        title: '编辑' + row.name + '货架',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['47.71%', '55.55%'],
                        content: 'gcxx/editHj.html?storageId=' + row.id + '&projectId=' + that.projectId + '&ckName=' + encodeURIComponent(row.name) + '&' + new Date().getTime(),
                        end: function () {
                        }
                    });
                },
                cancels() {
                    var that = this
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                },
                confirms() {
                    var that = this
                    if (this.selected.length == 0) {
                        this.$message({
                            message: '请选择',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }

                    var disableList = this.selected.filter(function (item) {
                        return parseInt(item.isspot) === 0;
                    })
                    if (disableList.length > 0) {
                        this.$message({
                            message: '请先选择新建仓库的位置',
                            type: 'warning',
                            duration: 1000
                        });
                        return
                    }
                    var data = JSON.stringify(this.selected);
                    parent.$('#publicValue').val(data);
                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    }, 100);

                    // var flag = false
                    // for (var i = 0; i < this.ckmxTableData.length; i++) {
                    //     if (this.ckmxTableData[i].idAdd) {
                    //         flag = true
                    //     }
                    // }
                    // if (flag) {
                    //     that.saveData()
                    // } else {
                    //     var data = JSON.stringify(this.selected);
                    //     parent.$('#publicValue').val(data);
                    //     setTimeout(function () {
                    //         var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    //         parent.layer.close(index);
                    //     }, 100);
                    // }
                },
                // 保存数据
                saveData() {
                    var that = this
                    var dataJson = this.ckmxTableData
                    if (dataJson.length == 0) {
                        this.$message({
                            message: '请添加仓库',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    // if (that.fileData.fileid.length == 0) {
                    //     this.$message({
                    //         message: '请上传图纸',
                    //         type: 'warning',
                    //         duration: 1000
                    //     });
                    //     return false
                    // }
                    // for (var i = 0; i < this.ckmxTableData.length; i++) {
                    //     if (this.ckmxTableData[i].isspot == 0) {
                    //         this.$message({
                    //             message: '请选择仓库位置',
                    //             type: 'warning',
                    //             duration: 1000
                    //         });
                    //         return false
                    //     }
                    // }
                    xLoading(true, '正在提交')
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/StorageDataManage',
                        data: {
                            projectId: that.projectId,
                            mapId: that.fileData.fileid + ',' + that.fileData.filename,
                            dataJson: JSON.stringify(dataJson)
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.$message({
                                message: '已提交',
                                type: 'success'
                            });
                            var data = JSON.stringify(this.selected);
                            parent.$('#publicValue').val(data);
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.layer.close(index);
                            }, 500)
                        }
                    });
                },
                fzrChange(val) {
                    for (var i = 0; i < this.fzrList.length; i++) {
                        if (val == this.fzrList[i].id) {
                            this.addCkObj.personinchargename = this.fzrList[i].name
                        }
                    }
                    this.$forceUpdate()
                },
                // 更新
                updateCkmx() {
                    if (this.addCkObj.name.length == 0) {
                        this.$message({
                            message: '请输入仓库名称',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (this.addCkObj.personinchargename.length == 0) {
                        this.$message({
                            message: '请选择负责人',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    this.$set(this.ckmxTableData, this.editIndex, JSON.parse(JSON.stringify(this.addCkObj)))
                    this.dialogVisible = false
                    this.$forceUpdate()
                },
                // 保存仓库明细 存在当前ckmxTableData可能是数组长度为0 空数组的情况
                saveCkmx() {
                    if (this.addCkObj.name.length == 0) {
                        this.$message({
                            message: '请输入仓库名称',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (this.addCkObj.personinchargename.length == 0) {
                        this.$message({
                            message: '请选择负责人',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    this.addCkObj.addtime = timeFormat(new Date(), 1)
                    // 解决当前 仓库明细列表长度为0 获取不到最后一项的情况 默认设置新增的为第一项 imgId = 1
                    // this.addCkObj.imgId = this.ckmxTableData[this.ckmxTableData.length - 1].imgId + 1
                    this.addCkObj.imgId = this.ckmxTableData.length > 0 ? this.ckmxTableData[this.ckmxTableData.length - 1].imgId + 1 : 1;
                    this.ckmxTableData.push(this.addCkObj)
                    this.dialogVisible = false
                },
                // 删除
                removeCkmx(index) {
                    var that = this
                    this.$confirm('此操作将删除此条数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        var obj = that.ckmxTableData[index]
                        if (obj.isspot && parseInt(obj.isspot) === 1) {

                            // 删除请求
                            obj.oper = "del";
                            $.ajax({
                                type: 'post',
                                headers: {
                                },
                                url: baseUrl + '/Material/SingleStorageDataManage',
                                data: {
                                    projectId: that.projectId,
                                    // mapId: that.fileData.fileid + ',' + that.fileData.filename,
                                    dataJson: JSON.stringify([obj])
                                },
                                dataType: 'json',
                                success: function (res) {
                                    if (!res.success) {
                                        that.$message({
                                            message: res.msg ? res.msg : '程序错误，请重试',
                                            type: 'error'
                                        });
                                        return false;
                                    } else {
                                        that.ckmxTableData.splice(index, 1);
                                        var list = that.ckmxTableData;

                                        $('.img_contan>.img_icon').remove()
                                        for (var i = 0; i < list.length; i++) {
                                            if (list[i].isspot == 1) {
                                                var imgUrl = ''
                                                if (list[i].type == 1) {
                                                    imgUrl = '../img/icon32.png'
                                                }
                                                if (list[i].type == 2) {
                                                    imgUrl = '../img/icon22.png'
                                                }
                                                if (list[i].type == 3) {
                                                    imgUrl = '../img/icon12.png'
                                                }
                                              
                                                $('.img_contan').append('<div style="top: calc(' + list[i].piexly + '% - 40px);left: calc(' + list[i].pixelx + '% - 13px);" class="img_icon"><img src="' + imgUrl + '" alt=""><div class="img_txt">' + list[i].imgId + '</div></div>')
                                            }
                                        }
                                    }
                                }
                            });
                        } else {
                            that.ckmxTableData.splice(index, 1)
                        }
                    }).catch(function () {
                    });
                },
                // 修改仓库明细
                editCkmx(row, index) {
                    this.editIndex = index
                    this.addCkObj = JSON.parse(JSON.stringify(row))
                    if (!row.isAdd) {
                        this.addCkObj.oper = 'update'
                    }
                    this.popupType = 'edit'
                    this.ckmxPopupTitle = '修改仓库明细'
                    this.dialogVisible = true
                },
                // 新增仓库明细
                addCkmx() {
                    this.addCkObj = {
                        oper: 'add',
                        name: '',
                        type: '1',
                        isspot: 0,
                        pixelx: '',
                        piexly: '',
                        describe: '',
                        creatercode: '',
                        creatername: '',
                        personinchargecode: '',
                        personinchargename: '',
                        addtime: '',
                        isAdd: true,
                        id: "",
                        projectid: this.projectId
                    }
                    this.popupType = 'add'
                    this.ckmxPopupTitle = '新增仓库明细'
                    this.dialogVisible = true
                },
                // 上传附件
                httprequest(file) {
                    var that = this
                    if (getFileType(file.file.name) != 'IMG') {
                        this.$message({
                            message: '只能上传图片',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    xLoading(true, '正在上传')
                    var formData = new FormData();
                    formData.append('files', file.file);
                    $.ajax({
                        type: 'post',
                        url: baseUrl + '/Common/UploadFile?method=UploadFile&type=OSS',
                        data: formData,
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                                return false;
                            }
                            $('.img_contan>.img_icon').remove()
                            for (var i = 0; i < that.ckmxTableData.length; i++) {
                                if (!that.ckmxTableData[i].isAdd) {
                                    that.ckmxTableData[i].oper = 'update'
                                }
                                that.ckmxTableData[i].pixelx = ''
                                that.ckmxTableData[i].piexly = ''
                                that.ckmxTableData[i].isspot = '0'
                            }
                            setTimeout(function () {
                                that.isupload = true
                                that.fileData = {
                                    fileid: res.data.fileId,
                                    filename: res.data.fileName,
                                    fileurl: '',
                                    uploadTime: res.data.uploadTime,
                                    userName: res.data.userName
                                }
                                var img = new Image();
                                img.onload = function () {
                                    that.fileData.fileurl = img.src
                                }
                                img.src = res.data.ossUrl;
                                that.setDrawimgBox(file.file)
                            }, 500);
                        }
                    });
                },
                setDrawimgBox(file, types) {
                    var that = this;
                    if (types == 1) {
                        var img = new Image();
                        img.onload = function () {
                            var widths = img.naturalWidth
                            var heights = img.naturalHeight
                            if (widths > $('.img_scroll_box').width()) {
                                $('.img_cont').css('width', '100%')
                            } else {
                                $('.img_cont').css('width', widths + 'px')
                            }
                        }
                        img.src = file;
                        return false
                    }
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(file); //根据图片路径读取图片
                    fileReader.onload = function (e) {
                        var base64 = this.result;
                        var img = new Image();
                        img.onload = function () {
                            var widths = img.naturalWidth
                            var heights = img.naturalHeight
                            if (widths > $('.img_scroll_box').width()) {
                                $('.img_cont').css('width', '100%')
                            } else {
                                $('.img_cont').css('width', widths + 'px')
                            }
                        }
                        img.src = base64;
                    }
                },
                // 选择位置
                chioseSpot(row) {
                    var that = this
                    if (!this.fileData.fileurl) {
                        this.$message({
                            message: '请先上传图纸',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    this.$confirm('请在图纸上选择位置点', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        that.isClick = true
                        that.spotId = row.imgId
                        // this.isSpot = 1
                        that.isspot = 1
                        // row.isAdd = true;
                        row.oper = 'add';
                        that.spottype = row.type
                    }).catch(function () {
                    });
                },
                // 重新选择位置
                reselectSpot(row) {
                    var that = this
                    if (!this.fileData.fileurl) {
                        this.$message({
                            message: '请先上传图纸',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    this.$confirm('是否重新选择位置', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        that.spotId = row.imgId
                        that.spottype = row.type
                        // row.isAdd = false;
                        row.oper = 'update';
                        that.isClick = true
                    }).catch(function () {
                    });

                },
                // 在图纸上选择点
                imgSpotChiose(e) {
                    if (!this.isClick) {
                        return false
                    }
                    this.isClick = false
                    var lefts = (e.offsetX / $('#drawing').width() * 100).toFixed(2)
                    var tops = (e.offsetY / $('#drawing').height() * 100).toFixed(2)
                    var targetObj = {};
                    for (var i = 0; i < this.ckmxTableData.length; i++) {
                        if (this.ckmxTableData[i].imgId === this.spotId) {
                            this.ckmxTableData[i]['pixelx'] = lefts
                            this.ckmxTableData[i]['piexly'] = tops
                            this.ckmxTableData[i].isspot = 1
                            targetObj = this.ckmxTableData[i];
                        }
                        // if (!this.ckmxTableData[i].isAdd) {
                        //     this.ckmxTableData[i].oper = 'update'
                        // }
                    }
                    var list = this.ckmxTableData;

                    var that = this;
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/SingleStorageDataManage',
                        data: {
                            projectId: that.projectId,
                            mapId: that.fileData.fileid + ',' + that.fileData.filename,
                            dataJson: JSON.stringify([targetObj])
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            } else {
                                if (targetObj.oper === "add") {
                                    targetObj.id = res.data;
                                }
                            }
                        }
                    });

                    // 删除重绘
                    $('.img_contan>.img_icon').remove()
                    for (var i = 0; i < list.length; i++) {
                        if (list[i].isspot == 1) {
                            var imgUrl = ''
                            if (list[i].type == 1) {
                                imgUrl = '../img/icon32.png'
                            }
                            if (list[i].type == 2) {
                                imgUrl = '../img/icon22.png'
                            }
                            if (list[i].type == 3) {
                                imgUrl = '../img/icon12.png'
                            }
                           
                            $('.img_contan').append('<div style="top: calc(' + list[i].piexly + '% - 40px);left: calc(' + list[i].pixelx + '% - 13px);" class="img_icon"><img src="' + imgUrl + '" alt=""><div class="img_txt">' + list[i].imgId + '</div></div>')
                        }
                    }
                    // var imgUrl = ''
                    // if (this.spottype == 1) {
                    //     imgUrl = '../img/icon2.png'
                    // }
                    // if (this.spottype == 2) {
                    //     imgUrl = '../img/icon3.png'
                    // }
                    // if (this.spottype == 3) {
                    //     imgUrl = '../img/icon1.png'
                    // }
                    // $('.img_cont').append('<div style="top: calc('+ tops +'% - 54px);left: calc('+ lefts +'% - 17px);" class="img_icon"><img src="'+ imgUrl +'" alt=""><div class="img_txt">'+ this.spotId +'</div></div>')
                },
                // 获取图片之后 获取仓库明细列表
                getCkmxList(files) {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/GetStorageInfos',
                        data: {
                            projectId: that.projectId,
                            isUse: '1'
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            setTimeout(function () {
                                // 对获取的图片的files进行处理
                                // b053713f423f42a9a30466fa1cd3b862,微信图片_20210317092904_看图王.jpg
                                if (files.length > 0) {
                                    that.isupload = true
                                    that.fileData = {
                                        fileid: files.split(',')[0],
                                        filename: files.split(',')[1],
                                        fileurl: ''
                                    }
                                    // 对获取的图片进行拼接处理
                                    // 将仓库图标加到相应的位置
                                    var img = new Image();
                                    img.onload = function () {
                                        that.fileData.fileurl = img.src
                                        setTimeout(function () {
                                            for (var i = 0; i < res.data.length; i++) {
                                                if (res.data[i].isspot == 1) {
                                                    var imgUrl = ''
                                                    if (res.data[i].type == 1) {
                                                        imgUrl = '../img/icon32.png'
                                                    }
                                                    if (res.data[i].type == 2) {
                                                        imgUrl = '../img/icon22.png'
                                                    }
                                                    if (res.data[i].type == 3) {
                                                        imgUrl = '../img/icon12.png'
                                                    }
                                               
                                                    $('.img_contan').append('<div style="top: calc(' + res.data[i].piexly + '% - 40px);left: calc(' + res.data[i].pixelx + '% - 13px);" class="img_icon"><img src="' + imgUrl + '" alt=""><div class="img_txt">' + res.data[i].imgId + '</div></div>')
                                                }
                                            }
                                        }, 100);
                                    }
                                    img.src = baseUrl + '/DataInput/FileService?method=DownloadFile&fileid=' + files.split(',')[0];
                                    // 将图片转为base64
                                    that.setDrawimgBox(img.src, 1)
                                }
                                // 给res.data数组 增加imgId imgId从1开始
                                for (var i = 0; i < res.data.length; i++) {
                                    res.data[i].imgId = i + 1
                                    res.data[i].x_goodsShelvesNumber = ''
                                    res.data[i].x_goodsShelvesId = ''
                                }
                                that.ckmxTableData = res.data
                                that.listNum = res.data.length

                            }, 500)
                        }
                    });
                },
                // 获取图片
                getCktzData() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/GetProjectMapId',
                        data: {
                            projectId: that.projectId
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (!res.success) {
                                xLoading(false)
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.getCkmxList(res.data)

                        }
                    });
                },
                getFzrList() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/GetFzrList',
                        data: {
                            projectId: that.projectId
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (!res.success) {
                                xLoading(false)
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.fzrList = res.data;
                        }
                    })
                }
            },
            mounted() {
                this.showApp = true;
                var that = this
                setTimeout(function () {
                    that.$refs.detailbox.style.height = 'calc(100% - ' + that.$refs.tops.offsetHeight + 'px)'
                }, 10)
                if (getQuerys('selectArr')) {
                    this.selectArr = JSON.parse(decodeURIComponent(getQuerys('selectArr')))
                }
                this.projectId = getQuerys('projectId')
                this.isSingle = getQuerys('isSingle')
                if (getQuerys('materiaobj')) {
                    this.materiaobj = JSON.parse(decodeURIComponent(getQuerys('materiaobj')))
                }
                this.getCktzData()
                this.getFzrList()
            }
        });
    </script>
</body>
<style>
  .content_box {
        padding: 2.77vh 2.08vw 4px;
        height: calc(100% - 70px);
    }

    .but_box {
        display: flex;
        justify-content: center;
        height: 70px;
        padding-bottom: 20px;
        align-items: flex-end;
        background: #fafbfc;
        border-top: 1px solid #ebebeb;
    }

        .but_box .el-button {
            width: 120px;
            height: 32px;
            border-radius: 5px;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .title_but {
        padding-left: 10px;
    }

    .cell_txt {
        color: #000000;
        font-weight: bold;
        line-height: 1;
    }

        .cell_txt span {
            padding-left: 10px;
        }

    .cell_box {
        display: flex;
        align-items: center;
        line-height: 1;
        margin-top: 2.77vh;
    }

    .cell_cont {
        margin-left: 10px;
        height: 32px;
        background: #E3E3E3;
        border: 1px solid #BBBBC5;
        border-radius: 5px;
        padding: 0 10px;
        display: flex;
        align-items: center;
    }

    .title_box {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
    }

    .detail_box {
        border: 1px solid #EBEBEB;
        padding: 2.77vh 2.08vw 10px;
    }

    .img_box {
        height: calc(100% - 250px);
    }

    .table_box {
        height: 250px;
    }

    .file_but {
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
    }

    .icon_type_box {
        display: flex;
        align-items: center;
    }

        .icon_type_box img {
            margin-left: 20px;
            width: 20px;
            height: 30px;
        }

        .icon_type_box div {
            margin-left: 8px;
        }

    .img_box {
        padding-top: 2.77vh;
    }

    .file_box {
        height: calc(100% - 42px);
        border: 1px dashed #D6D6D6;
        border-radius: 5px;
    }

    .img_scroll_box {
        width: calc(100% + 18px);
        height: 100%;
        background: rgba(0, 0, 0, 0);
        overflow: auto;
        position: relative;
    }

    .img_cont {
        position: relative;
        padding: 40px 14px 0;
    }

    .file_box .el-upload-dragger {
        border: none;
    }

    .file_cont {
        width: 100%;
        height: 100%;
    }

    .file_upload-demo {
        width: 100%;
        height: 100%;
    }

    .file_cont .el-upload {
        width: 100%;
        height: 100%;
    }

    .file_cont .el-upload-dragger {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .file_cont .el-upload-dragger .el-icon-upload {
            margin-top: 0;
        }

    .public_popup_box {
        height: 100%;
    }

    .public_popup_cell_box {
        padding: 2.77vh 2.08vw 0;
        height: calc(100% - 70px);
        overflow: auto;
    }

    .public_popup {
        height: 70vh;
    }

    .popup_cell_item {
        display: flex;
        margin-bottom: 20px;
    }

    .popup_cell_name {
        width: 100px;
        padding-right: 10px;
        text-align: right;
        line-height: 32px;
    }

    .popup_cell_cont {
        padding-right: 100px;
        display: flex;
        align-items: center;
        flex: 1;
    }

    .el-radio {
        margin-right: 1.56vw;
    }

    .img_icon {
        position: absolute;
        width: 26px;
        height: 40px;
    }

    .img_txt {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 4px;
    }
</style>

</html>